<template>
  <client-only>
    <div class="main">
      <div class="title">
        <a class="active" href="/sign" style="text-decoration: none;">登录</a>
        <span>·</span>
        <a href="/register" style="text-decoration: none;">注册</a>
      </div>

      <div class="sign-up-container">
        <el-form ref="userForm" :model="user">

          <el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
            <div >
              <el-input type="text" placeholder="手机号" v-model="user.mobile"/>
              <i class="el-icon-mobile-phone" />
            </div>
          </el-form-item>
          <el-form-item v-if="isSms" class="input-prepend restyle no-radius" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
            <div class="smscode" style="width: 100%;display: block;float: left;position: relative">
              <el-input type="text" placeholder="验证码" v-model="user.code"/>
              <i class="el-icon-chat-dot-square"/>
            </div>
            <div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;">
              <!-- <a :disabled="disabled" href="javascript:" type="button" @click="sendCode()" :value="codeTest" style="border: none;background-color: none;text-decoration: none;" v-text="codeTest"/> -->
              <el-button :disabled="disabled" @click="sendCode()" type="text"  :value="codeTest" style="border: none;background-color: none;text-decoration: none;" v-text="codeTest"/>
            </div>
          </el-form-item> 

          <el-form-item v-else class="input-prepend" prop="password" style="margin-bottom: 0px;" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
            <div>
              <el-input type="password" placeholder="密码" v-model="user.password"/>
              <i class="el-icon-lock"/>
            </div>
          </el-form-item>

          <div class="btn">
            <!-- <input type="button" class="sign-in-button" value="登录" @click="submitLogin()"> -->
            <el-button type="button" class="sign-in-button" round value="登录" @click="submitLogin()" style="width: 100%;line-height: 24px;font-size: 17px;" >登 录</el-button>
          </div>
        </el-form>

        <div style="margin: 0;margin-top: 10px">
          <el-button type="text" v-text="loginType" @click="changeLoginType()"></el-button>
        </div>
        <!-- 更多登录方式 -->
        <div class="more-sign" style="margin-top: 10px;">
          <h6>社交帐号登录</h6>
          <ul>
            <li><a id="weixin" class="weixin" target="_blank" style="text-decoration: none;" href="http://qy.free.idcfengye.com/api/ucenter/weixinLogin/login"><i class="iconfont icon-weixin"/></a></li>
            <li><a id="qq" class="qq" target="_blank" style="text-decoration: none;" href="#"><i class="iconfont icon-qq"/></a></li>
          </ul>
        </div>
      </div>
    </div>
  </client-only>
</template>

<script>
  import '~/assets/css/sign.css'
  import '~/assets/css/iconfont.css'
  import cookie from 'js-cookie'
  import sign from '@/api/sign'

  export default {
    layout: 'sign',

    data () {
      return {
        user:{
          mobile:'',
          password:'',
          code: ''
        },
        loginInfo:{},
        sending: true,      //是否发送验证码
        second: 60,        //倒计时间
        codeTest: '获取验证码',
        disabled: true,
        loginType: '使用短信登录',
        isSms: false
      }
    },

    methods: {
      checkPhone (rule, value, callback) {
        //debugger
        if (!(/^1[34578]\d{9}$/.test(value))) {
          this.disabled = true
          return callback(new Error('手机号码格式不正确'))
        }
        this.disabled = false
        return callback()
      },
      submitLogin () {
        if (this.isSms) {
          sign.submitLoginBySms(this.user)
            .then((result) => {
              if (result.data.success) {
                cookie.set("user_token",result.data.data.token)
                sign.getLoginInfo()
                  .then((result) => {
                    if (result.data.success) {
                      cookie.set("user_ucenter",JSON.stringify(result.data.data.items))
                      window.location.href = "/"
                    } else {
                      this.$message.error(result.data.message)
                    }
                  })
              } else {
                this.$message.error(result.data.message)
              }
            })
        } else {
          sign.submitLogin(this.user)
            .then((result) => {
              if (result.data.success) {
                cookie.set("user_token",result.data.data.token)
                sign.getLoginInfo()
                  .then((result) => {
                    if (result.data.success) {
                      cookie.set("user_ucenter",JSON.stringify(result.data.data.items))
                      window.location.href = "/"
                    } else {
                      this.$message.error(result.data.message)
                    }
                  })
              } else {
                this.$message.error(result.data.message)
              }
            })
        }
      },
      sendCode() {
        if ((/^1[34578]\d{9}$/.test(this.user.mobile))) {
          this.disabled = false
          sign.getMobile(this.user.mobile)
            .then(response => {
              if (response.data.success) {
                this.$message({
                message: '验证码发送成功！',
                type: 'success'
              })
              this.timeDown()
              }
            })
        } else {
          this.$message.error(response.data.message)
        }
      },
      changeLoginType() {
        this.isSms = !this.isSms
        this.loginType = this.isSms ? '使用密码登录' : '使用短信登录'
      },
      timeDown() {
        let result = setInterval(() => {
          --this.second;
          this.codeTest = this.second
          this.disabled = true;
          if (this.second < 1) {
            clearInterval(result);
            this.sending = true;
            this.disabled = false;
            this.second = 60;
            this.codeTest = "获取验证码"
          }
        }, 1000);        
      }
    }
  }
</script>
<style>
   .el-form-item__error{
    z-index: 9999999;
  }
  .sign form .input-prepend .smscode input {
    width: 100%;
    height: 50px;
    margin-bottom: 0;
    border: 1px solid #c8c8c8;
    border-radius: 0 0 4px 4px;
    vertical-align: middle;
}
</style>